<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.4.1/dist/css/bootstrap.min.css">
    <title>CMS</title>
</head>

<body>
    <div id="app">
        <div class="container-fluid">
            <div class="navbar navbar-expand-md navbar-dark bg-dark fixed-top">
                <a href="#" class="navbar-brand">CMS</a>
                <div class="navbar-text">欢迎使用CMS系统</div>
                <div class="ml-auto">
                    <span class="navbar-text">欢迎登陆【admin】</span>
                    <a href="#" class="navbar-text">退出</a>
                </div>
            </div>
            <div class="row vh-100 pt-5">
                <div class="col-3 h-100 p-0">
                    <card title="内容管理" class="h-100 p-0" header-class="bg-white">
                        <ul class="list-group list-group-flush">
                            <li class="list-group-item" v-for="nav,index in navs" :key="index">
                                <router-link :to="nav.path">{{nav.title}}</a>
                            </li>
                        </ul>
                    </card>
                </div>
                <div class="col-9 p-0">
                    <router-view></router-view>
                </div>
            </div>
        </div>
    </div>

    <template id="customSwitch">
        <div class="custom-control custom-switch">
            <input type="checkbox" class="custom-control-input" :id="dataId" :checked="checked"
                @change="$emit('change',$event.target.checked)">
            <label :for="dataId" class="custom-control-label"></label>
        </div>
    </template>

    <template id="formGroupInput">
        <div class="form-group row">
            <label :for="dataId" class="col-3 col-form-label text-right">{{labelText}}</label>
            <input :id="dataId" :type="type" class="col-8 form-control" :placeholder="placeholder" :value="value"
                @input="$emit('input',$event.target.value)">
        </div>
    </template>
    <template id="formGroupSelect">
        <div class="form-group row">
            <label :for="dataId" class="col-3 col-form-label text-right">{{labelText}}</label>
            <select class="col-8 form-control" :id="dataId" @change="$emit('change',$event.target.value)">
                <option v-for="option,index in options" :key="index" :value="option.value"
                    :selected="option.value == value">{{option.title}}</option>
            </select>
        </div>
    </template>
    <template id="formGroupSwitch">
        <div class="form-group row">
            <label :for="dataId" class="col-3 col-form-label text-right">{{labelText}}</label>
            <custom-switch :data-id="dataId" class="mt-2" :checked="checked" @change="change"></custom-switch>
        </div>
    </template>

    <template id="card">
        <div class="card">
            <div class="card-header" :class="headerClass">
                <h3 class="card-title">{{title}}</h3>
            </div>
            <div class="card-body" :class="bodyClass">
                <slot></slot>
            </div>
        </div>
    </template>
    <template id="articleList">
        <card title="文章列表" class="border-0 p-0" header-class="bg-white border-0">
            <table class="table table-bordered">
                <thead class="text-center table-dark">
                    <tr>
                        <th>序号</th>
                        <th>标题</th>
                        <th>类目</th>
                        <th>热门</th>
                        <th>操作</th>
                    </tr>
                </thead>
                <tbody class="text-center">
                    <tr v-for="article,index in articles">
                        <td>{{index+1}}</td>
                        <td>{{article.title}}</td>
                        <td>{{ categories[article.category].title }}</td>
                        <td>
                            <custom-switch :data-id="`hot${index}`" v-model='article.hot'></custom-switch>
                        </td>
                        <td>
                            <router-link :to="`/article/edit/${index}`" class="btn btn-primary btn-sm">编辑</router-link>
                            <button class="btn btn-danger btn-sm" @click="articles.splice(index,1)">删除</button>
                        </td>
                    </tr>
                </tbody>
            </table>
        </card>
    </template>
    <template id="articleEdit">
        <card title="新增文章" class="border-0 p-0" header-class="bg-white border-0">
            <form>
                <form-group-input label-text="标题：" placeholder="请输入标题" data-id="title" v-model="article.title">
                </form-group-input>
                <form-group-select label-text="类目：" data-id='category' :options="categories" v-model="article.category">
                </form-group-select>
                <form-group-switch label-text="热门：" data-id="hot" v-model="article.hot" @change1="change">
                </form-group-switch>
                <div class="form-group row">
                    <button class="btn btn-primary offset-3" type="button" @click="submit">提交</button>
                </div>
            </form>
        </card>
    </template>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/jquery@3.4.1/dist/jquery.slim.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.4.1/dist/js/bootstrap.min.js"></script>
    <script>
        const categories = [
            { value: 0, title: '默认' },
            { value: 1, title: '栏目一' },
            { value: 2, title: '栏目二' },
            { value: 3, title: '栏目三' },
        ]
        const articles = [
            { title: '标题1', category: 1, hot: true },
            { title: '标题2', category: 2, hot: false },
            { title: '标题3', category: 3, hot: false }
        ]
        const navs = [
            { title: '新增文章', path: '/article/edit' },
            { title: '文章列表', path: '/article/list' },
        ]

        Vue.component('formGroupSwitch', {
            model: {
                prop: 'checked',
                event: 'change1'
            },
            props: {
                checked: {
                    default: false
                },
                dataId: {
                    default: ''
                },
                labelText: {
                    default: ''
                }
            },
            methods: {
                change(checked) {
                    this.$emit('change1', checked)
                }
            },
            template: '#formGroupSwitch'
        })
        Vue.component('formGroupSelect', {
            model: {
                prop: 'value',
                event: 'change'
            },
            props: {
                value: {
                    default: 0
                },
                options: {
                    default: function () {
                        return []
                    }
                },
                dataId: {
                    default: ''
                },
                labelText: {
                    default: ''
                }
            },
            template: '#formGroupSelect'
        })
        Vue.component('formGroupInput', {
            model: {
                prop: 'value',
                event: 'input'
            },
            props: {
                value: {
                    default: ''
                },
                labelText: {
                    default: ''
                },
                dataId: {
                    default: ''
                },
                type: {
                    default: 'text'
                },
                placeholder: {
                    default: ''
                }
            },
            template: '#formGroupInput'
        })
        Vue.component('customSwitch', {
            model: {
                prop: 'checked',
                event: 'change'
            },
            props: {
                checked: {
                    default: false
                },
                dataId: {
                    default: ''
                }
            },
            template: '#customSwitch'
        })
        Vue.component('card', {
            props: {
                title: {
                    default: ''
                },
                headerClass: {
                    default: ''
                },
                bodyClass: {
                    default: ''
                }
            },
            template: '#card'
        })

        const articleList = {
            data: function () {
                return {
                    articles: articles,
                    categories: categories
                }
            },
            template: '#articleList'
        }
        const articleEdit = {
            mounted() {
                const id = this.$route.params.id
                if (id !== undefined) {
                    this.article = articles[id]
                }
            },
            data: function () {
                return {
                    article: { title: '', category: 0, hot: false },
                    categories: categories
                }
            },
            methods: {
                change(checked) {
                    this.article.hot = checked
                },
                submit() {
                    if (this.$route.params.id === undefined) {
                        articles.push(this.article)
                    }

                    this.$router.push({ path: '/article/list' })
                }
            },
            template: '#articleEdit'
        }

        let app = new Vue({
            router: new VueRouter({
                routes: [
                    { path: '/article/edit/:id?', component: articleEdit },
                    { path: '/article/list', component: articleList },
                ]
            }),
            el: '#app',
            data: {
                navs: navs
            }
        })
    </script>
</body>

</html>